import { mapGetters } from "vuex";
import Grid from "vux/src/components/grid/grid.vue";
import GridItem from "vux/src/components/grid/grid-item.vue";
import GroupTitle from "vux/src/components/group-title/index.vue";
import Flexbox from "vux/src/components/flexbox/flexbox.vue";
import FlexboxItem from "vux/src/components/flexbox/flexbox-item.vue";
import Divider from "vux/src/components/divider/index.vue";

import template from "./personalCenterTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  data() {
    return {
      score: 0,
      nextScore: 0,
      nextName: "",
      userScore: 0,
      differScore: 0,
      nextStatus: 0,
      honorIcon: "",
      nextHonorIcon: "",

      upgradeFlag: false,
      currentLevel: null,

      isTourist: true,
    };
  },
  created() {
    var vm = this;
    if (vm.userInfo.username) {
      setTimeout(function () {
        vm.integralData();
      }, 20);
    }

    if (this.accountData && this.accountData.is_tourist === 1) {
      this.isTourist = true;
    } else {
      this.isTourist = false;
    }
  },
  mounted() {},
  computed: {
    ...mapGetters(["userInfo", "accountData"]),
  },
  methods: {
    removeImg() {
      this.userInfo.avatar = "";
    },
    integralData() {
      var upgrade = this.userInfo.honor.upgrade;
      this.score = Number(this.userInfo.honor.score);
      this.nextScore = Number(this.userInfo.honor.next_score);
      this.userScore = Number(this.userInfo.honor.user_score);
      this.differScore = this.nextScore - this.userScore;
      this.nextStatus = this.userInfo.honor.next_status;
      this.currentLevel = Number(this.userInfo.honor.grade);
      this.honorIcon =
        this.imgRequest +
        "/up_files/honor/sbadge0" +
        this.currentLevel +
        ".png";
      this.nextHonorIcon =
        this.imgRequest +
        "/up_files/honor/sbadge0" +
        (this.currentLevel + 1) +
        ".png";

      if (this.nextStatus == 1) {
        //最高等级
        this.widthScore = 100;
        this.honorIcon =
          this.imgRequest +
          "/up_files/honor/sbadge0" +
          (this.currentLevel - 1) +
          ".png";
        this.nextHonorIcon =
          this.imgRequest +
          "/up_files/honor/sbadge0" +
          this.currentLevel +
          ".png";
      } else {
        this.widthScore = Math.ceil(
          ((this.userScore - this.score) / (this.nextScore - this.score)) * 100
        );
      }
      this.$refs.refWidthScore.style.width = this.widthScore + "%";
      if (upgrade == 1) {
        this.upgradeFlag = true;
      }
    },
    CloseUpgrade() {
      //关闭升级弹框
      var params = {
        token: localStorage.getItem("token"),
      };
      this.upgradeFlag = false;
      this.$http
        .post(this.urlRequest + "?m=api&c=user&a=closeHonorBox", params)
        .then((res) => {
          if (res.status == 0) {
            this.userInfo.honor.upgrade = 0;
            localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
          }
        });
    },
    goRouter(path) {
      this.$router.push({ path });
    },
  },
  watch: {
    userInfo(obj) {
      var vm = this;
      if (obj.username) {
        setTimeout(function () {
          vm.integralData();
        }, 20);
      }
    },
    accountData(obj) {
      if (obj.is_tourist && obj.is_tourist === 1) {
        this.isTourist = true;
      } else {
        this.isTourist = false;
      }
    },
  },
};

// WEBPACK FOOTER //
// ./src/components/personalCenter/personalCenter.vue
